import React from 'react';
import ReactEcharts from 'echarts-for-react';

function BarChart({ data, title, type }){
    let seriesData = [], valueData=[], categoryData = [];
    if ( data ) {
        Object.keys(data).sort((a, b)=> a < b ? -1 : 1).forEach(key=>{
            categoryData.push(key);
            valueData.push(data[key]);
        })
    }
    seriesData.push({
        type: type || 'bar',
        symbolSize:6,
        name:title,
        barWidth:10,
        itemStyle:{
            color: 
                type === 'line' 
                ?
                '#14d3c3'
                :
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: title === '耗电量' ? '#15f8fd' : '#f2cd31' // 0% 处的颜色
                    }, {
                        offset: 1, color: title === '耗电量' ? '#12a1fe' : '#debb29' // 100% 处的颜色
                    }],
                },
            barBorderRadius:6
        },
        data:valueData
    })
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height:'100%' }}
            option={{
                tooltip:{
                    trigger:'axis'
                },
                grid:{
                    top:14,
                    bottom:10,
                    left:10,
                    right:20,
                    containLabel:true
                },
                xAxis: {
                    type: 'category',
                    axisTick:{ show:false },
                    axisLabel:{ 
                        color:'rgba(255, 255, 255, 0.65)', 
                        formatter:value=>{
                            let strArr = value.split('-');
                            return strArr.length ? strArr[2] : value;
                        }
                    },
                    axisLine:{
                        show:false,
                        lineStyle:{
                            color:'rgba(18, 168, 254, 0.8)'
                        }
                    },
                    data:categoryData,
                    
                },
                yAxis: {
                    type: 'value',
                    axisTick:{ show:false },
                    axisLabel:{
                        color:'rgba(255, 255, 255, 0.65)'
                    },
                    axisLine:{ show:false },
                    splitLine:{
                        lineStyle:{
                            type:'dashed',
                            color:'rgba(255,255,255,0.2)'
                        }
                    }
                },
                series: seriesData
            }}
        />
    )
}

function areEqual(prevProps, nextProps){
    if ( prevProps.data !== nextProps.data  ){
        return false;
    } else {
        return true;
    }
}

export default React.memo(BarChart, areEqual);